<template>
    <div>
        <h3>场地活动信息</h3>
          <el-collapse accordion>
            <el-collapse-item v-for="(item,index) in activityList " :key="index" class="collapse"> 
                <template #title>
                    {{dealTime(item.startTime)+"--"+dealTime(item.endTime)}}  
                </template>
                <div class="item">
                    <el-row :gutter="20" cass="el-row">
                        <el-col :span="6">
                            <label class="label">主要产品:</label>
                            <span>{{item.product}}</span>
                        </el-col>
                        <el-col :span="6">
                            <label class="label">原辅材料:</label>
                            <span>{{item.rawMaterial}}</span>
                        </el-col>
                   
                        <el-col :span="6">
                            <label class="label">间产物:</label>
                            <span>{{item.intermediateProduct}}</span>
                        </el-col>
                        <el-col :span="6">
                            <label class="label">生产工艺:</label>
                            <span>{{item.productProcess}}</span>
                        </el-col>
                    </el-row>
                     <el-row :gutter="20" v-if="item.projectFile" cass="el-row">
                        <el-col :span="6">
                            <label class="label">文件名称:</label>
                            <span >{{item.projectFile.fileName+"."+item.projectFile.filetype}}</span>
                        </el-col>
                        <el-col :span="12">
                            <label class="label">文件描述:</label>
                            <span>{{item.projectFile.fileDesc}}</span>
                        </el-col>
                   
                        <el-col :span="6">
                            <span  @click="dowloadFile(item.projectFile)" class="dowload">下载</span>
                        </el-col>
                    </el-row>
                </div>
            </el-collapse-item>
            </el-collapse>
         <h3>场地排污情况</h3>
          <el-collapse accordion>
            <el-collapse-item v-for="(item,index) in emissionList" :key="index" class="collapse"> 
                <template #title>
                    {{dealTime(item.startTime)+"--"+dealTime(item.endTime)}}  
                </template>
                <div class="item">
                    <el-row :gutter="20" cass="el-row">
                        <el-col :span="6">
                            <label class="label">排污活动编号:</label>
                            <span>{{item.emissionCode}}</span>
                        </el-col>
                        <el-col :span="12">
                            <label class="label">治理设施:</label>
                            <span>{{item.treatment}}</span>
                        </el-col>
                   
                        <el-col :span="6">
                            <label class="label">排污活动状态:</label>
                            <span>{{item.status}}</span>
                        </el-col>
                    </el-row>
                </div>
            </el-collapse-item>
        </el-collapse>

        <h3>场地环境事件</h3>
        <el-collapse accordion>
            <el-collapse-item v-for="(item,index) in eventList " :key="index" class="collapse"> 
                <template #title>
                    {{dealTime(item.startTime)+"--"+dealTime(item.endTime)}}  
                </template>
                <div class="item">
                    <el-row :gutter="20" cass="el-row">
                        <el-col :span="12">
                            <label class="label">排污事件编号:</label>
                            <span>{{item.eventCode}}</span>
                        </el-col>
                        <el-col :span="12">
                            <label class="label">事件描述:</label>
                            <span>{{item.shortDesc}}</span>
                        </el-col>
                    </el-row>
                </div>
            </el-collapse-item>
        </el-collapse>

        <h3>场地历史信息</h3>
        <el-collapse accordion>
            <el-collapse-item v-for="(item,index) in historyList" :key="index" class="collapse"> 
                <template #title>
                    {{dealTime(item.startTime)+"--"+dealTime(item.endTime)}}  
                </template>
                <div class="item" cass="el-row">
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <label class="label">历史事件编号:</label>
                            <span>{{item.historyCode}}</span>
                        </el-col>
                        <el-col :span="18">
                            <label class="label">事件描述:</label>
                            <span >{{item.shortDescription}}</span>
                        </el-col>
                    </el-row>
                </div>
            </el-collapse-item>
        </el-collapse>

        <h3>场地历史图片</h3>
        <el-collapse accordion>
            <el-collapse-item v-for="(item,index) in historyPicList" :key="index" class="collapse"> 
                <template #title>
                    <el-row :gutter="20" v-if="item.projectFile" cass="el-row">
                        <el-col :span="6">
                            <label class="label">文件名称:</label>
                            <span>{{item.ShortDesc}}</span>
                        </el-col>
                        <el-col :span="12">
                            <label class="label">文件描述:</label>
                            <span>{{item.ShortDesc}}</span>
                        </el-col>
                   
                        <el-col :span="6">
                            <span  @click="dowloadFile(item.projectFile.filepath)" class="dowload">下载</span>
                        </el-col>
                    </el-row>
                </template>
            </el-collapse-item>
        </el-collapse>
        <h3>场地修复事件</h3>
        <el-collapse accordion>
            <el-collapse-item v-for="(item,index) in remediationList " :key="index" class="collapse"> 
                <template #title>
                    {{dealTime(item.startTime)+"--"+dealTime(item.endTime)}}  
                </template>
                <div class="item">
                    <el-row :gutter="20" cass="el-row">
                        <el-col :span="12">
                            <label class="label">事件编号:</label>
                            <span>{{item.eventCode}}</span>
                        </el-col>
                        <el-col :span="12">
                            <label class="label">事件描述:</label>
                            <span>{{item.shortDesc}}</span>
                        </el-col>
                    </el-row>
                     <el-row :gutter="20" v-if="item.projectFile" cass="el-row">
                        <el-col :span="6">
                            <label class="label">文件名称:</label>
                            <span>{{item.projectFile.fileName+"."+item.projectFile.filetype}}</span>
                        </el-col>
                        <el-col :span="12">
                            <label class="label">文件描述:</label>
                            <span class="discriptSpan">{{item.projectFile.fileDesc}}</span>
                        </el-col>
                        <el-col :span="6">
                            <span  @click="dowloadFile(item.projectFile.filepath)" class="dowload">下载</span>
                        </el-col>
                    </el-row>
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
import { getActivity,getEmission,getEvent,getHistory,getHistoryPic,getremediation} from "@/api/project/project";
import { saveAs } from 'file-saver'
export default {
    name: 'historyInfo',
    props:{
        projectId:{},
        zoneId:{},
    },
    data() {
        return {
            params:{},
            //场地活动信息
            activityList:[],
            //场地污染情况
            emissionList:[],
            //获取场地环境事件
            eventList:[],
            //场地历史信息
            historyList:[],
            //场地历史图片
            historyPicList:[],
            //场地修复事件
            remediationList:[]
        };
    },

   watch:{
        projectId(val){
            this.params={
                projectId :val,
                zoneId:this.zoneId
            }
            this.getActivityList()
            this.getEmissionList()
            this.getEventList()
            this.getHistoryList()
            this.getHistoryPicList()
            this.getremediationList()
        }
    },
    methods: {
        //获取场地活动信息
        getActivityList(){
            getActivity(this.params).then(
                response => {
                    this.activityList = response.data.records
                }
            );
        },
        //获取场地污染情况
        getEmissionList(){
            getEmission(this.params).then(
                response => {
                    this.emissionList = response.data.records
                }
            );
        },
        //获取场地环境事件
        getEventList(){
            getEvent(this.params).then(
                response => {
                    this.eventList = response.data.records
                }
            );
        },
        //获取场地历史信息
        getHistoryList(){
            getHistory(this.params).then(
                response => {
                    this.historyList = response.data.records
                }
            );
        },
        //获取场地历史图片
        getHistoryPicList(){
            getHistoryPic(this.params).then(
                response => {
                    this.historyPicList = response.data.records
                }
            );
        },
        //获取场地修复事件
        getremediationList(){
            getremediation(this.params).then(
                response => {
                    this.remediationList = response.data.records
                }
            );
        },
        //时间格式处理
        dealTime(val){
            if(val==null){
                return "无"
            }else{
                return val.split("T")[0]
            }
        },
        //下载文件
        dowloadFile(val){
            let url =this.baseUrl+'/subnet/'+val.webpath+'/'+val.fileName+'.'+val.filetype
            debugger
            saveAs(url)
        }

    },
};
</script>

<style lang="scss" scoped>
.collapse{
    margin-left: 10px;
}
.item{
    .el-row{
        // height: 40px;
        line-height: 40px;
    }
    margin-left: 10px;
    background: #F1F3F4;
    .label{
        margin-right: 10px;
    }
    .dowload{
        color: rgb(25, 25, 223);
        cursor: pointer;
    }
 
}
</style>